<script setup lang='ts' name="mall-home">
import Footer from '@/pages/footer/footer.vue'
import { useGetHomeList } from '@fl/api/man-api'
import { computed } from 'vue'

import Advantage from './component/advantage.vue'
import Brand from './component/brand.vue'
import Elevator from './component/elevator.vue'
import Hot from './component/hot.vue'
import Partner from './component/partner.vue'
import Sence from './component/sence.vue'
import Swiper from './component/swiper.vue'

const { data } = useGetHomeList()

const target = computed(() => {
    return {
        ...data.value,
    }
})
</script>

<template>
    <Elevator />

    <Swiper :data="target[0]" />

    <Advantage :data="target" />

    <Sence />

    <Brand :data="target[2]" />

    <Hot />

    <Partner :data="target[3]" />

    <Footer />
</template>

<style>
.jc-home-title {
    span {
        color: #da0004;
        font-size: 32px;
        font-weight: 600;
        line-height: 48px;
    }

    p {
        color: #aaa;
        font-family: '`PingFang SC`';
        font-size: 20px;
        line-height: 20px;
        text-transform: uppercase;
        letter-spacing: 0;
    }
}
</style>
